<template>
  <div class="compute_page_class">
    <div style="height: 48px;background-color: #69CBC6;display: flex;align-items: center;justify-content: center; position: relative">
      <img src="./assets/img/logo.png" alt="" style="width: 100px;margin-left: 8px;position: absolute;left: 8px;top: 10px">
      <div style="font-size: 20px;color: #FFFFFF;font-weight: bolder">计算程序</div>
    </div>
    <div style="padding: 0 8px;">
      <el-row :gutter="8" justify="center">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card body-style="padding: 8px;">
            <div style="display: flex;align-items: center;justify-content: center;flex-direction: column;border-bottom: 2px solid #69CBC6;padding-bottom: 8px">
              <div style="display: flex;align-items: center;justify-content: center">
                <IconAirVolume style="width: 24px;height: 24px"/>
                <span style="font-weight: bold;margin-left: 8px;font-size: 14px">风量预算方案一</span>
              </div>
              <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;font-weight: bold;">
                <span> q= W/（0.355*Δt）</span>
                <span style="margin-left: 16px;"> Q=(1.5-3)q </span>
              </div>
            </div>
            <div style="padding: 8px;">
              <el-divider content-position="left" style="margin: 16px 0;">输入参数</el-divider>
              <div style="display: flex;align-items: center;margin-top: 16px;">
                <span style="width: 210px;margin-right: 16px;">(W)系统总热损耗:</span>
                <el-input style="width: 100%" v-model="ComputeParam1.param_w" clearable />
                <span style="width: 60px;margin-left:8px;text-align: right">W</span>
              </div>
              <div style="display: flex;align-items: center;margin-top: 16px;">
                <span style="width: 210px;margin-right: 16px;">(Δt)空气温升:</span>
                <el-input-number style="width: 100%" v-model="ComputeParam1.param_t"  :min="5" :max="15" />
                <span style="width: 60px;margin-left:8px;text-align: right">℃</span>
              </div>
              <div style="display: flex;align-items: center;margin-top: 16px;">
                <span style="width: 210px;margin-right: 16px;">裕量:</span>
                <el-input-number style="width: 100%" v-model="ComputeParam1.param_y" :step="0.5"  :min="1" :max="3" />
                <span style="width: 60px;margin-left:8px;text-align: right"></span>
              </div>
              <el-divider content-position="left" style="margin:16px 0;">输出参数</el-divider>
              <div style="display: flex;align-items: center;">
                <span style="width: 210px;margin-right: 16px;">(q)理论风量:</span>
                <span style="width: 100%;font-size: 16px;color: #FF0000">{{ComputeParam1.param_q}}</span>
                <span style="width: 60px; margin-left:8px;text-align: right">m³/h</span>
              </div>
              <div style="display: flex;align-items: center;margin-top: 16px;">
                <span style="width: 210px;margin-right: 16px;">(Q)所需风量:</span>
                <span style="width: 100%; font-size: 16px;color: #FF0000">{{ComputeParam1.param_s}}</span>
                <span style="width: 60px;margin-left:8px;text-align: right">m³/h</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import "./style/index.scss"
import { ref, computed } from "vue";

import IconAirVolume from "./components/icons/IconAirVolume.vue";

const ComputeParam1 = ref({
  param_q: computed(() => {
    // q= W/（0.355*Δt）
    return (ComputeParam1.value.param_w / (0.355 * ComputeParam1.value.param_t)).toFixed(4)
  }),
  param_s: computed(() => {
    // Q=(1.5-3)q
    return (ComputeParam1.value.param_q * ComputeParam1.value.param_y).toFixed(4)
  }),
  param_w: 4673,
  param_t: 11,
  param_y: 1.5,
})

const ComputeParam2 = ref({
  param_s: computed(() => {
    // Q=W/1.134*Δt
    return (ComputeParam2.value.param_w / (1.134 * ComputeParam2.value.param_t)).toFixed(4)
  }),
  param_h: computed(() => {
    // Q=W/1.134*Δt
    return (ComputeParam2.value.param_s * 3600).toFixed(4)
  }),
  param_w: 4.67,
  param_t: 11,
})

</script>
<style scoped lang="scss">
.compute_param_class{
  ::v-deep .el-input .el-input-group__prepend{
    width: 12px !important;
  }
}
</style>
